<template>
    <div class="">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-message"></i>&nbsp;查看商品</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form ref="form" label-width="160px">
             <el-form-item label="商品名称：">
                 <div>{{listDetail.goods_name}}</div>
            </el-form-item>
            <el-form-item label="商品副标题：">
                 <div>{{listDetail.goods_title}}</div>
            </el-form-item>
            <el-form-item label="商品轮播图：">
                <div class="sola-upload clearfix">
                    <div class="sola-left clearfix" v-show="listDetail.banner_img">
                        <div v-for="(item, index) in listDetail.banner_img" class="sola-flex" :key="index">
                            <img  :src="item" />
                        </div>
                    </div>
                </div>
            </el-form-item>
             <el-form-item label="总库存：">
                 <div>{{listDetail.total_stock}}</div>
            </el-form-item>
             <el-form-item label="已卖数量：">
                 <div>{{listDetail.selled_stock}}</div>
            </el-form-item>
               <el-form-item label="发布时间：">
                 <div>{{listDetail.create_time}}</div>
            </el-form-item>
            <el-form-item label="运费：">
                 <div>{{listDetail.freight_money}}</div>
            </el-form-item>
            <el-form-item label="满多少金额包邮：">
                 <div>{{listDetail.free_shipping}}</div>
            </el-form-item>
             <el-form-item label="24小时发货时间：">
                 <div>{{listDetail.delivery_time}}</div>
            </el-form-item>
             <el-form-item label="退换类型：">
                 <div>{{listDetail.refund_type}}</div>
            </el-form-item>
            <el-form-item label="状态：">
                 <div>{{listDetail.state}}</div>
            </el-form-item>
                <el-form-item label="商品规格信息：">
                    <div class="clearfix">
                        <div v-for="(item,index) in listDetail.specList" style="padding-bottom:10px;" :key="index">
                            <el-input v-model="item.spec"  placeholder="请输入规格名称" style="width:160px" clearable disabled></el-input>
                            <el-input v-model="item.price" type="number" placeholder="请输入规格原价" style="width:160px" disabled></el-input>
                            <el-input v-model="item.original_price" type="number" placeholder="请输入规格优惠价" style="width:160px" disabled></el-input>
                            <el-input v-model="item.stock" type="number" placeholder="请输入规格SKU" style="width:160px" disabled></el-input>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="商品详情图：">
                    <div class="sola-upload clearfix">
                        <div class="sola-left clearfix" v-show="listDetail.goods_detail">
                            <div v-for="(item, index) in listDetail.goods_detail" class="sola-flex" :key="index">
                                <img  :src="item" />
                            </div>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button  @click="returnList">返回商品列表</el-button>
                </el-form-item>
            </el-form>
        </div>
        
    </div>
</template>
<script>
import { getcGoodDetails } from "@/api/goods/goods";
export default {
  name: "goodsList",
  data() {
    return {
      idx: 0, //当前记录的下标
      delVisible: false,
      listDetail: {}, //商品详情数据
    };
  },
  //实例创建
  created() {
    //获取商品信息
    //console.log(this.$route.params.goodsId);
    if (this.$route.query.goodsId && this.$route.query.goodsId > 0) {
      this.getGoodsInfo();
    } else {
      //跳转商品信息
      console.log("获取是商品ID失败");
    }
  },
  //计算属性
  computed: {},
  //方法
  methods: {
    //获取商品信息
    getGoodsInfo() {
      //获取商品信息
      getcGoodDetails(this.$route.query.goodsId)
        .then(response => {
          console.log(response);
          if (response.code == 200) {
            var data = response.data;
            this.listDetail = data;
            if (typeof data.goods_detail != "object") {
              this.listDetail.goods_detail = JSON.parse(data.goods_detail);
            }
            if (typeof data.banner_img != "object") {
              this.listDetail.banner_img = JSON.parse(data.banner_img);
            }
            //1可退可换、2可退不换、3不可退可换、4不退不换
            if(this.listDetail.refund_type==1){
                this.listDetail.refund_type='可退可换'
            } 
               if(this.listDetail.refund_type==2){
                this.listDetail.refund_type='可退不换'
            } 
               if(this.listDetail.refund_type==3){
                this.listDetail.refund_type='不可退可换'
            } 
               if(this.listDetail.refund_type==4){
                this.listDetail.refund_type='不退不换'
            } 
            //状态：0上架、1下架
              if(this.listDetail.state==0){
                this.listDetail.state='上架'
            } else{
                this.listDetail.state='下架'
            }
      
          } else {
            console.log("获取商品详情失败");
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //返回商品列表页
    returnList() {
      this.$router.push({ path: "/goods/list" });
    }
  }
};
</script>
<style lang="stylus" scoped>
.el-form-item .el-cascader {
    width: 400px;
}

.el-cascader-menus .el-cascader-menu {
    width: 240px;
}

.sola-upload {
    .sola-left {
        width: 100%;
        height: auto;

        .sola-flex {
            float: left;
            width: 360px;
            height: 180px;
            margin-bottom: 20px;
            margin-right: 15px;
            position: relative;

            .delete {
                position: absolute;
                top: 2px;
                right: 13px;
                color: #f56c6c;
                display: inline-block;
                padding: 5px 5px;

                .el-alert__icon {
                    font-size: 28px;
                    cursor: pointer;
                }
            }

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    .sola-file-box {
        position: relative;

        .btn-file {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            opacity: 0;
            width: 120px;
            height: 40px;
            outline: 0;
            background-color: none;
            cursor: pointer;
        }
    }
}
</style>


